<!-- 编辑任务页面 -->
<template>
  <view class="edit-task-page">
    <!-- 导航栏 -->
    <NavBar title="编辑任务" showBack="true"></NavBar>
    
    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 任务表单 -->
      <view class="task-form" v-if="task">
        <!-- 任务标题 -->
        <view class="input-group">
          <label>任务标题 *</label>
          <uni-input v-model="task.title" placeholder="例如：英语单词学习"></uni-input>
        </view>
        
        <!-- 任务描述 -->
        <view class="input-group">
          <label>任务描述</label>
          <uni-input v-model="task.description" type="textarea" placeholder="添加任务的详细说明"></uni-input>
        </view>
        
        <!-- 开始时间 -->
        <view class="input-group">
          <label>开始时间 *</label>
          <uni-datetime-picker
            v-model="task.startTime"
            type="time"
            :start="'00:00'"
            :end="'23:59'"
            placeholder="选择任务开始时间"
          ></uni-datetime-picker>
        </view>
        
        <!-- 持续时间 -->
        <view class="input-group">
          <label>持续时间（分钟）*</label>
          <uni-input v-model.number="task.duration" type="number" placeholder="输入任务持续时间"></uni-input>
        </view>
        
        <!-- 任务状态 -->
        <view class="input-group">
          <label class="flex-between">
            <text>任务状态</text>
            <uni-switch v-model="task.isCompleted"></uni-switch>
          </label>
        </view>
        
        <!-- 周期性任务设置 -->
        <view class="input-group">
          <label class="flex-between">
            <text>周期性任务</text>
            <uni-switch v-model="task.isRecurring" @change="onRecurringChange"></uni-switch>
          </label>
        </view>
        
        <!-- 重复模式（仅在周期性任务开启时显示） -->
        <view class="input-group" v-if="task.isRecurring">
          <label>重复模式 *</label>
          <uni-picker
            :value="getRecurrenceIndex()"
            :range="recurrenceOptions"
            range-key="label"
            @change="onRecurrencePatternChange"
          ></uni-picker>
        </view>
        
        <!-- 跳过节假日（仅在周期性任务开启时显示） -->
        <view class="input-group" v-if="task.isRecurring">
          <label class="flex-between">
            <text>跳过节假日</text>
            <uni-switch v-model="task.skipHolidays"></uni-switch>
          </label>
        </view>
      </view>
      
      <!-- 加载状态 -->
      <view class="loading-state" v-else>
        <uni-loading type="circle"></uni-loading>
        <text>加载任务中...</text>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-buttons">
        <uni-button type="warn" @click="deleteTask">删除任务</uni-button>
        <uni-button type="primary" class="btn-primary" @click="saveTask">保存更改</uni-button>
      </view>
    </view>
  </view>
</template>

<script>
// 导入组件
import NavBar from '../../components/NavBar.vue'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      // 任务数据
      task: null,
      // 重复模式选项
      recurrenceOptions: [
        { value: 'daily', label: '每天' },
        { value: 'workdays', label: '工作日' },
        { value: 'weekends', label: '周末' },
        { value: 'weekly', label: '每周' }
      ]
    }
  },
  onLoad(options) {
    // 获取任务ID
    const taskId = parseInt(options.id)
    // 从Vuex获取任务数据
    const task = this.$store.state.tasks.find(t => t.id === taskId)
    
    if (task) {
      // 深拷贝任务数据，避免直接修改Vuex中的数据
      this.task = { ...task }
    } else {
      // 如果找不到任务，显示错误提示并返回上一页
      uni.showToast({
        title: '任务不存在',
        icon: 'none',
        success: () => {
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      })
    }
  },
  methods: {
    // 周期性任务开关变化
    onRecurringChange(value) {
      // 如果关闭周期性任务，清空重复模式
      if (!value) {
        this.task.recurrencePattern = ''
      }
    },
    
    // 获取重复模式在选项中的索引
    getRecurrenceIndex() {
      return this.recurrenceOptions.findIndex(option => option.value === this.task.recurrencePattern)
    },
    
    // 重复模式变化
    onRecurrencePatternChange(e) {
      this.task.recurrencePattern = this.recurrenceOptions[e.detail.value].value
    },
    
    // 保存任务更改
    saveTask() {
      // 表单验证
      if (!this.task.title.trim()) {
        uni.showToast({
          title: '请输入任务标题',
          icon: 'none'
        })
        return
      }
      
      if (!this.task.startTime) {
        uni.showToast({
          title: '请选择开始时间',
          icon: 'none'
        })
        return
      }
      
      if (!this.task.duration || this.task.duration <= 0) {
        uni.showToast({
          title: '请输入有效的持续时间',
          icon: 'none'
        })
        return
      }
      
      if (this.task.isRecurring && !this.task.recurrencePattern) {
        uni.showToast({
          title: '请选择重复模式',
          icon: 'none'
        })
        return
      }
      
      // 更新任务到Vuex
      this.$store.commit('updateTask', this.task)
      
      // 显示保存成功提示
      uni.showToast({
        title: '任务已更新',
        icon: 'success',
        duration: 1500,
        success: () => {
          // 返回上一页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      })
    },
    
    // 删除任务
    deleteTask() {
      // 显示确认对话框
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个任务吗？',
        success: (res) => {
          if (res.confirm) {
            // 删除任务
            this.$store.commit('deleteTask', this.task.id)
            // 显示删除成功提示
            uni.showToast({
              title: '任务已删除',
              icon: 'success',
              duration: 1500,
              success: () => {
                // 返回上一页
                setTimeout(() => {
                  uni.navigateBack()
                }, 1500)
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.edit-task-page {
  padding-top: 88rpx; /* 导航栏高度 */
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-content {
  padding: 20rpx;
}

.task-form {
  background-color: white;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.input-group {
  margin-bottom: 30rpx;
}

.input-group label {
  display: block;
  margin-bottom: 10rpx;
  color: #666;
  font-size: 28rpx;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
}

.loading-state text {
  margin-top: 20rpx;
  font-size: 28rpx;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  padding: 0 20rpx;
}

.action-buttons uni-button {
  flex: 1;
  font-size: 28rpx;
}

.btn-primary {
  background-color: #4CAF50 !important;
  color: white !important;
}
</style>